<template>
  <view class="main">
    <nav-bar />
    <view class="info pt-44">
      <div class="title mb-8">TA的性别</div>
      <view class="sex_box flex-r">
        <view class="sex_item flex_a_c flex1" @click="sex = 2">
          <img class="sex_icon" v-if="sex === 1" src="https://magic.mirror.source.axeastro.com/magic-mirror/select_normal.png" alt="">
          <img class="sex_icon" v-if="sex === 2" src="https://magic.mirror.source.axeastro.com/magic-mirror/select_active.png" alt="">
          <view>男</view>
        </view>
        <view class="sex_item flex_a_c flex1" @click="sex = 1">
          <img class="sex_icon" v-if="sex === 2" src="https://magic.mirror.source.axeastro.com/magic-mirror/select_normal.png" alt="">
          <img class="sex_icon" v-if="sex === 1" src="https://magic.mirror.source.axeastro.com/magic-mirror/select_active.png" alt="">
          <view>女</view>
        </view>
      </view>
    </view>
    <div class="txt">如果用一种动物描述对方<br>你会认为ta是地球上的什么动物</div>
    <div class="mt-64 flex_center flex_wrap pb-50">
      <view class="animal_list flex_center flex-c" @click="cur = index" v-for="(item, index) in animalList" :key="index">
        <image :src="cur === index ? item.url : item.normal" class="animal_img"></image>
        <view>{{ item.title }}</view>
      </view>
    </div>
    <view class="btn" @click="onNext">询问我和TA</view>
  </view>
</template>
<script>
import canvas from '@/components/canvas/canvas'
export default {
  components: { canvas },
  data() {
    return {
      sex: 1,
      cur: '',
      animalList: [
        {
          normal: 'https://magic.mirror.source.axeastro.com/magic-mirror/panda_normal.png',
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/panda_active.png',
          title: '熊猫'
        },
        {
          normal: 'https://magic.mirror.source.axeastro.com/magic-mirror/dog_normal.png',
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/dog_active.png',
          title: '狗'
        },
        {
          normal: 'https://magic.mirror.source.axeastro.com/magic-mirror/fox_normal.png',
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/fox_active.png',
          title: '狐狸'
        },
        {
          normal: 'https://magic.mirror.source.axeastro.com/magic-mirror/cat_normal.png',
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/cat_active.png',
          title: '猫'
        },
        {
          normal: 'https://magic.mirror.source.axeastro.com/magic-mirror/snake_normal.png',
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/snake_active.png',
          title: '蛇'
        },
        {
          normal: 'https://magic.mirror.source.axeastro.com/magic-mirror/cattle_normal.png',
          url:  'https://magic.mirror.source.axeastro.com/magic-mirror/cattle_active.png',
          title: '牛'
        },
        {
          normal: 'https://magic.mirror.source.axeastro.com/magic-mirror/deer_normal.png',
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/deer_active.png',
          title: '鹿'
        },
        {
          normal: 'https://magic.mirror.source.axeastro.com/magic-mirror/tiger_normal.png',
          url: 'https://magic.mirror.source.axeastro.com/magic-mirror/tiger_active.png',
          title: '虎'
        },
        {
          normal: 'https://magic.mirror.source.axeastro.com/magic-mirror/pig_normal.png',
          url:'https://magic.mirror.source.axeastro.com/magic-mirror/pig_active.png',
          title: '猪'
        },
      ]
    }
  },
  methods: {
    onNext() {
      uni.navigateTo({
        url: '/pages/canvas/index?owned=false'
      })
    }
  }

}
</script>
<style lang="scss" scoped>
.main {
  padding-bottom: 130rpx;
  background: #FFFFFF;
}
.sex_box {
  height: 76rpx;
  position: relative;
  padding-left: 2rpx;
  padding-right: 26rpx;
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4rpx;
    width: 622rpx;
    height: 4rpx;
    background: #000000;
    border-radius: 22rpx 22rpx 22rpx 22rpx;
  }
  .sex_item {
    line-height: 76rpx;
    .sex_icon {
      display: block;
      width: 36rpx;
      height: 36rpx;
      margin-right: 8rpx;
    }
  }
}
.info {
  width: 622rpx;
  margin: 0 auto;
  
}
.title {
  font-weight: 600;
  font-size: 40rpx;
  color: #000000;
  line-height: 47rpx;
}
.txt {
  font-weight: normal;
  font-size: 32rpx;
  color: #000000;
  text-align: center;
  font-style: normal;
 	font-family: pf_bold;
  margin-top: 84rpx;
  line-height: 58rpx;

}
.animal_list {
  width: 208rpx;
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;
  line-height: 40rpx;
  margin-bottom: 40rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  .animal_img {
    width: 124rpx;
    height: 124rpx;
    display: block;
    margin-bottom: 16rpx;
  }
}

.btn {
  width: 620rpx;
  height: 96rpx;
  border-radius: 86rpx 86rpx 86rpx 86rpx;
  text-align: center;
  margin: 0 auto;
  background: #000000;
  font-size: 32rpx;
  color: #FFFFFF;
  line-height: 96rpx;
  font-style: normal;
}
</style>